<template>
  <div>
    <h2>事件与行为</h2>

    <common-echarts
      :option="option"
      ref="echarts"
      :height="height"
      :width="width"
    ></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";

export default {
  name: "EventEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "所售商品",
          type: "pie",
          data: [
            { value: 343, name: "A商品" },
            { value: 250, name: "B商品" },
            { value: 509, name: "C商品" },
            { value: 108, name: "D商品" },
            { value: 948, name: "E商品" },
          ],
        },
      ];

      return {
        title: {
          text: "各商品销量占比",
          subtext: "事件与行为",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["A商品", "B商品", "C商品", "D商品", "E商品"],
        },
        series,
      };
    },
  },
  data() {
    return {
      echarts: null,
      width: 600,
      height: 500,
    };
  },
  mounted() {
    this.bindEvent();
  },
  methods: {
    bindEvent() {
      // 事件绑定api:https://echarts.apache.org/zh/api.html#events
      var myChart = this.$refs.echarts.getChart();
      //处理点击事件并且跳转到相应的百度搜索页面
      myChart.on("click", function (params) {
        console.log(params);
        window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name));
      });
    },
  },
};
</script>
